<template>
    <el-card>
        <el-table
                border
                :data="sysMenuTree"
                style="width: 100%"
                row-key="id">
            <el-table-column prop="name" label="Name">
                <template #default="item">
                    <el-icon v-if="item.row.icon">
                        <component class="el-menu-icon" :is="item.row.icon"></component>
                    </el-icon>
                    {{ item.row.name }}
                </template>
            </el-table-column>
            <el-table-column prop="sort" label="sort"/>
            <el-table-column prop="menuType" label="menuType"/>
            <el-table-column prop="path" label="path">
                <template #default="item">
                    <el-tooltip
                            v-if="item.row.children&&item.row.children.length>0"
                            class="box-item"
                            effect="dark"
                            content="当前菜单有子菜单!"
                            placement="right"
                    >
                        <span style="color:red;">{{ item.row.path }}</span>
                    </el-tooltip>
                    <span v-else>{{ item.row.path }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template #default="item">
                    <el-button type="primary" link size="small"
                               @click="sysMenuApi.deleteById(item.row.id)
                              .confirm('确认删除菜单及其子菜单?')
                              .success(result => {
                                  MsgUtils.successMsg('删除成功');
                                  getData();
                              }).request()">删除
                    </el-button>
                    <el-button type="primary" link size="small" @click="()=>{editVisible = true;formData = item.row}">编辑</el-button>
                    <el-button type="primary" link size="small" @click="()=>{
                        editVisible = true;
                        formData = {};
                        formData.parentId = item.row.parentId;}">添加同级菜单
                    </el-button>
                    <el-button type="primary" link size="small" @click="()=>{
                        editVisible = true;
                        formData = {};
                        formData.parentId = item.row.id;}">添加下级菜单
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog
                v-model="editVisible"
                width="30%"
                title="编辑"
                :destroy-on-close="true"
                :close-on-click-modal="false">
            <Editpage :formData="formData"
                      @saveSuccess="()=>{editVisible = false;getData()}"
            ></Editpage>
        </el-dialog>
    </el-card>
</template>
<script lang="ts" setup>
    import {onMounted, ref} from "vue";
    import sysMenuApi, {SysMenuTree} from "@/api/sys/SysMenuApi";
    import MsgUtils from "@/common/utils/MsgUtils";
    import EditDialog from "./components/EditDialog.vue";
    import Editpage from "./editpage.vue";
    import TableLayout from "../../../components/TableLayout.vue";

    let sysMenuTree = ref<SysMenuTree[]>([]);
    let editVisible = ref(false);

    let formData = ref<SysMenuTree>();

    function getData() { //获取菜单数据
        sysMenuApi.getSysMenu().success(result => {
            sysMenuTree.value = result.data;
        }).errorMsg('获取数据失败').request()
    }

    onMounted(() => {
        getData();
    })
</script>
<style scoped>
    .testaa {
        max-height: 400px;
    }
</style>
